<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import Tip from "../Common/Tip.vue";

import { computed, ref } from "vue";
import { Location, Tickets, User } from "@element-plus/icons-vue";
import type { ComponentSize } from "element-plus";

const size = ref<ComponentSize>("default");

const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap[size.value || 'default']
  };
});

</script>
<template>
  <div class="pl-5 pr-5">
    <ProductBox title="发票信息管理" :back="true">
      <Tip>
        请与公司财务人员确认开票信息，若因开票信息错误或其他非阿帕云原因造成的退票，退票运费须由客户自行承担，拒绝到付。
      </Tip>

      <div class="mt-5"></div>
      <el-descriptions class="margin-top" title="发票信息" :column="3" :size="size" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              发票类型
            </div>
          </template>
          专用发票
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <location />
              </el-icon>
              发票抬头
            </div>
          </template>
          -
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              税务登记号
            </div>
          </template>
          -
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              开户银行
            </div>
          </template>
          专用发票
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <location />
              </el-icon>
              公司地址
            </div>
          </template>
          -
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              联系电话
            </div>
          </template>
          -
        </el-descriptions-item>
      </el-descriptions>

      <router-link to="/account/receiptManagementInfo">

        <a-button type="primary" class="mt-5">
          修改信息
        </a-button>
      </router-link>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped></style>
